<template>
  <div class="forget">
    <div class="forget-main">
      <img src="@/assets/img/login/logo.png" class="logo" alt="" />
      <section>
        <form novalidate>
          <md-field>
            <input-validate
              v-model="info.mobile"
              placeholder="请输入您的手机号"
              v-validate="'required|mobile'"
              name="mobile"
              type="phone"
              icon="iconzhanghao"
              data-vv-value-path="innerValue"
              data-vv-validate-on="input"
              data-vv-as="您的手机号"
              :error="errors.first('mobile')"
            >
            </input-validate>
            <input-validate
              v-model="info.imgCode"
              placeholder="请输入图形验证码"
              v-validate="'required|max:4'"
              rightType="1"
              :imgUrl="imgSrc"
              name="imgcode"
              type="digit"
              icon="iconyanzhengma"
              data-vv-value-path="innerValue"
              data-vv-validate-on="input"
              data-vv-as="图形验证码"
              :error="errors.first('imgcode')"
              @changeImg="changeImg"
            >
            </input-validate>
            <input-validate
              v-model="info.code"
              placeholder="请输入短信验证码"
              v-validate="'required|max:6'"
              rightType="2"
              name="code"
              type="digit"
              icon="iconduanxinyanzhengma"
              data-vv-value-path="innerValue"
              data-vv-validate-on="input"
              data-vv-as="短信验证码"
              :error="errors.first('code')"
              @sendCode="sendCode"
              ref="code"
            >
            </input-validate>
          </md-field>
          <md-button type="primary" class="nextBtn" @click="next"
            >下一步</md-button
          >
        </form>
      </section>
    </div>
  </div>
</template>

<script>
import { InputItem, Field, Button } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("mobile", "请输入正确的手机号");
export default {
  name: "forget",
  components: {
    inputValidate,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      imgSrc: "",
      codeText: "获取验证码",
      isCode: true, //显示倒计时或显示获取验证码字样
      countDownText: 60, //获取验证码倒计时
      timer: null, //计时器
      info: {
        mobile: "",
        imgCode: "",
        code: ""
      }
    };
  },
  methods: {
    getCode() {
      this.$ajax
        .get(this.$api.getPicCode)
        .then(res => {
          this.imgSrc = res.data.code;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    changeImg() {
      this.getCode();
    },
    sendCode() {
      this.$validator
        .validateAll({
          imgcode: this.info.imgCode,
          mobile: this.info.mobile
        })
        .then(result => {
          if (result) {
            let data = {
              mobile: this.info.mobile,
              type: "reset",
              code: this.info.imgCode
            };
            this.$ajax
              .post(this.$api.sendResetCode, data)
              .then(() => {
                this.$refs.code.countdown();
              })
              .catch(err => {
                this.$toast.failed(err);
              });
          } else {
            this.$toast.failed("请你输入完整信息！");
          }
        });
    },
    next() {
      this.$validator.validate().then(result => {
        if (result) {
          let data = {
            mobile: this.info.mobile,
            code: this.info.code
          };
          this.$ajax
            .post(this.$api.judgeCode, data)
            .then(() => {
              this.$router.push({
                name: "resetPsw",
                params: { mobile: this.info.mobile, code: this.info.code }
              });
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    }
  },
  mounted() {
    this.getCode();
  },
  beforeDestroy() {
    if (this.timer) {
      //如果定时器还在运行 或者直接关闭，不用判断
      window.clearInterval(this.timer); //关闭
    }
  }
};
</script>

<style scoped lang="stylus">
.forget{
  background-image: url("../../assets/img/login/loginBg.png");
  background-size: 100%;
  background-repeat:no-repeat;
  padding 186px 24px 112px 24px;
}
.forget-main{
  background-color #ffffff;
  position relative;
  border-radius 20px;
  box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.3);
}
.logo{
  width: 149px;
  position absolute;
  left 50%;
  margin-left -74.5px;
  margin-top -74.5px;
}
section{
  padding 220px 52px 248px 52px;
}
.imgCode{
  height: 60px;
  width: 152px;
}
.getCodeBtn{
  height: 30px;
  font-size 20px;
  color #999999;
  padding-left 18px;
  line-height 30px;
  border-left 2px solid #E6E6E6;
}
.nextBtn {
  width: 252px;
  height: 64px;
  margin 82px auto 0;
  background-color #327eb9;
  text-align center;
  line-height 64px;
  border-radius 16px;
  color #ffffff;
  font-size 26px;
}
.md-button.primary::after{
  border none;
}
</style>
